<template>
	<view class="invite">
		<view class="invite-wrap">
			<view class="invite-top">
				<view class="invite-top-title">邀请码</view>
				<view class="invite-top-code color1">{{code}}</view>
				<view class="invite-top-btn bg2" @click="onClipboard">复制</view>
			</view>
			<view class="invite-bottom">
				<view class="invite-bottom-border">
					<view class="invite-bottom-border-l"></view>
					<view class="invite-bottom-border-r"></view>
				</view>
				
				<view class="invite-bottom-qr">
					<block v-if="qrval">
						<qrcode :val="qrval" :size="qrsize" ref="qrcode"></qrcode>
					</block>
					<block v-else>
						<van-loading />
					</block>
				</view>
				<!-- <view class="invite-bottom-btn bg3">立即邀请好友</view> -->
			</view>
		</view>
		<view class="invite-url" @click="onClipboardUrl">点击复制链接</view>
	</view>
</template>
<script>
import qrcode from '../../../components/qrcode/qrcode.vue';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			qrval: '',
			code: '',
			qrsize: 140
		};
	},
	onShow() {
		this.code = this.userInfo.number
		this.qrval = 'http://39.108.60.14/bht/#/?code=' + this.userInfo.number
		setTimeout(() => {
			this.creatQrcode();
		},10)
	},
	computed: {
		...mapGetters({
			userInfo: 'getUserInfo'
		})
	},
	methods: {
		creatQrcode() {
			if (!this.qrval) {
				uni.showToast({
					title: '二维码生成失败',
					icon: 'none'
				});
				return;
			}
			this.$refs.qrcode.creatQrcode();
		},
		clearQrcode() {
			this.$refs.qrcode.clearQrcode();
		},
		onClipboard() {
			uni.setClipboardData({
				data: this.code,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		onClipboardUrl () {
			uni.setClipboardData({
				data: this.qrval,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'none',
						duration: 2000
					});
				}
			});
		}
	},
	components: {
		qrcode
	}
};
</script>
<style scoped lang="scss">
.invite {
	&-wrap {
		width: 600upx;
		height: 66vh;
		margin: 50upx auto 30upx auto;
		text-align: center;
		background-color: white;
		border-radius: 8upx;
	}
	&-top,
	&-bottom {
		&-btn {
			font-weight: 400;
			position: relative;
			display: inline-block;
			padding: 12upx 24upx;
			color: #333;
			text-align: center;
			border-radius: 80upx;
			color: white;
		}
	}
	&-top {
		padding: 30upx 30upx;
		border-bottom: #eeeeee 1px dashed;
		&-title {
			font-weight: bold;
			font-size: 40upx;
		}
		&-code {
			font-size: 54upx;
			margin: 20upx auto;
			letter-spacing: 2px;
		}
		&-btn {
			width: 200upx;
		}
	}
	&-bottom {
		&-border {
			position: relative;
			margin-top: 30upx;
			height: 60upx;
			&-l,
			&-r {
				position: absolute;
				top: 0px;
				width: 60upx;
				height: 60upx;
				border-radius: 120upx;
				background-color: #f4f4f4;
			}
			&-l {
				left: -30upx;
			}
			&-r {
				right: -30upx;
			}
		}
		&-qr {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 240upx;
			height: 240upx;
			margin: auto;
		}
		&-btn {
			width: 300upx;
			margin-top: 40upx;
		}
	}
	&-url {
		text-align: center;
		color: #5da7f3;
	}
}
</style>
